<!DOCTYPE html>
<head>
    <title>明信片制作</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!-- head 中 -->
    <link rel="stylesheet" th:href="@{/jquery-weui/lib/weui.css}">
    <link rel="stylesheet" th:href="@{/jquery-weui/css/jquery-weui.css}">
    <script type="text/javascript" th:src="@{/jquery-weui/lib/jquery-2.1.4.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/jquery-weui/js/jquery-weui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/jsfiles/crypto-js.min.js?t=1}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/jsfiles/com.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/jsfiles/hammer.min.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/jsfiles/iscroll-zoom-min.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/jsfiles/lrz.all.bundle.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/jsfiles/PhotoClip.js}" charset="utf-8"></script>

    <style>
        .the_hand {
            width: 32px;
            height: 32px;
            /* 指定动画效果 */
            animation: name 0.75s ease infinite;
            /* 指定手的浮动 */
            position: absolute;
            z-index: 1;
            margin: 45px 82px;
        }
        @keyframes name{
            0% {transform: scale(1);}
            50% {transform: scale(1.25);}
            100% {transform: scale(1)}
        }
        html{
            height: 100%;
        }
        body{
            width: 100%;
            height:100%;
            overflow: scroll;
        }
        *{
            margin: 0;
            padding: 0;
        }
        .main{
            width: 100%;
            height:100%;
        }
        .flex{
            /*flex 布局*/
            display: flex;
            /*实现垂直居中*/
            align-items: center;
            /*实现水平居中*/
            justify-content: center;
            flex-direction: column;
            text-align: justify;
            width:100%;
            height:30%;
            background: #f6f6f6;
            margin:0 auto;
        }
        .stamps{
            width: 100%;
            height: 460px;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: 50%;
            position: relative;
        }
        .small{
            width: 11%;
            height: 14%;
            background-color: #e5e5e5;
            position: absolute;
            line-height: 59px;
            font-size: 13px;
            color: #666;
            text-align: center;
        }
        .big {
            width: 35.5%;
            height: 29%;
            background-color: #e5e5e5;
            position: absolute;
            font-size: 13px;
            color: #666;
            text-align: center;
        }
        .wdzpzs{
            width: 100%;
            height: 100%;
            z-index: 100000;
            position: absolute;
            background-color:rgba(0,0,0,0.8);
            background-repeat: no-repeat;
            background: url('') no-repeat center center fixed;
            background-size: cover;
            display: none;
        }
        .container {
            display: flex; /* 使用Flexbox布局 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            height: 100vh; /* 容器高度设置为视口高度 */
            flex-direction: column;
        }
        .content {
            width: 100%; /* 内容宽度 */
            display: flex; /* 使用Flexbox布局 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */


        }
        .wdzp{
            width:240px;
            height:180px;
            margin-left: 41px;
            margin-top: 30px;
        }
        .wdzp_div{
            width:320px;
            height:250px;
            background: url("");
            background-size:100%;
        }
        /* 修改标题的文字大小 */
        .weui-dialog__title {
            font-size: 24px;
        }
        .weui-dialog__bd {
            font-size: 20px;
        }
        /* 修改按钮的文字大小和内边距 */
        .weui-dialog__btn {
            font-size: 20px;
            padding: 10px 20px;
        }
    </style>

</head>

<body>
<div id="wdzpzs" class="wdzpzs">
    <div class="container">
        <div class="content">
            <div id="wdzp_div" class="wdzp_div">
                <img id="wdzp" src="" class="wdzp">
            </div>
        </div>
        <div style="height: 15px;"></div>
        <div>

        </div>
        <div>

        </div>
    </div>
</div>
</body>
<!-- body 最后 -->
<script>
    //活动id
    var id = "[[${id}]]";
    var lx = "[[${lx}]]";
    var adminUrl = "[[${adminUrl}]]";
    //后端地址
    var url = "[[${serverUrl}]]/stamp/hd/";
    //图片显示
    var url1 = "[[${serverUrl}]]/stamp/tp/";
    function init_data(){
        $.showLoading("数据加载中...");
        var jsonData = {
            hd_id: id,
            lx:lx,
            timestamp:new Date().getTime()
        };
        var sendStr = {
            data:encrypt_str(JSON.stringify(jsonData),localStorage.getItem("a"),localStorage.getItem("b"))
        };
        $.ajax({
            type:"post",
            url:url+"get_hd_yl",
            data:JSON.stringify(sendStr),
            dataType:"json",
            timeout : 10*1000, //超时时间设置，单位毫秒
            crossDomain: true,
            contentType: 'application/json;charset=UTF-8',
            headers: {
                "token": localStorage.getItem("token")
            },
            beforeSend: function(request) {
                request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
            },
            success:function(result){
                console.info("result:"+JSON.stringify(result));
                if (result.code==0){
                    let rtn = decrypt_str(result.data,localStorage.getItem("a"),localStorage.getItem("b"));
                    console.info("rtn:"+rtn);
                    var d = JSON.parse(rtn);
                    let bj = url1+"hdbj?id="+d.urlId;
                    let xk = url1+"gxhxk?id="+d.urlId;
                    let wdzp = url1+"gxhmb?id="+d.urlId;
                    $("#wdzpzs").css('background-image', "url("+bj+")");
                    $("#wdzp_div").css('background-image', "url("+xk+")");
                    $("#wdzp").attr('src', wdzp);
                    $("#wdzpzs").show();

                }else if (result.code==500){
                }else {
                }
            },
            error:function(result){

            },complete:function(){
                $.hideLoading();
            }
        });
    }

    //初始化数据
    init_data();
</script>